//请求开发环境的服务器的axios实例
import axios from "axios";
//进度条
import nProgress from "nprogress";
import "nprogress/nprogress.css";

//创建一个实例
const request = axios.create({
  baseURL: process.env.VUE_APP_API,
  timeout: 10000,
});

//给实例配置拦截器
request.interceptors.request.use(
  //请求拦截器回调函数
  (config) => {
    //发送请求触发进度条启动
    nProgress.start();
    //config：是axios请求的配置对象
    // console.log(config);

    //拦截器中逻辑完成后，必须把config配置对象再返回出去，否则请求无法继续进行
    return config;
  },
  //进入处理失败的回调函数有两种方法：1.请求拦截器可以设置多个，当上一次失败的就会进入当此的失败函数  2.给拦截器传入额外的参数，主动进入
  (error) => {
    //如果拦截器错误的请求下,我们要返回一个失败的promise实例
    //为什么要返回失败的promise实例????? 因为拦截器最终的返回结果是通过then方式返回的,then或catch只有再返回失败的promise实例的时候,then或catch才是失败状态,axios才能之后我们失败了
   
    //触发响应以后，进度条结束
    nProgress.done();
    return Promise.reject(error.message);
  }
);
//响应拦截器
request.interceptors.response.use(
  (response) => {
    //response是请求回来axios组装的数据,其中data属性是服务端响应的数据
    // console.log(response);
    //我们一定要在响应拦截器中返回一个数据,否则axios方法无法得到数据
       //触发响应以后，进度条结束
    //触发响应以后，进度条结束
    nProgress.done();

    if (response.data.code === 200) {
      return response.data.data;
    } else {
      //自己封装一个错误对象
      return Promise.reject({ message: response.data.message });
    }
    //写到这
  },
  (error) => {
    //当响应失败,则处理失败情况,要返回一个失败的priomise实例
     //触发响应以后，进度条结束
     nProgress.done();
    return Promise.reject(error.message);
    
  }
);


export default request;
